<template>
  <!--弹出窗-->
  <modal ref="modal_info"
         :title="title"
         :isCloseConfirm="this.editable"
         :fullscreen="this.fullscreen"
         top="10%"
         width="50%"
         :close-on-click-modal="true"
         @modalOpened="opened"
         @modalClose="closed">

      <el-form :model="form" label-width="120px" ref="form">
        <el-form-item label="发信人">
          <div>{{form.fromUserName}}</div>
        </el-form-item>
        <el-form-item label="收信人">
          <div>{{form.toUserName}}</div>
        </el-form-item>
        <el-form-item label="发送时间">
          <div>{{form.createTime}}</div>
        </el-form-item>
      
      
        <el-form-item label="内容">
          <div class="article article-text" v-html="form.content"></div>
        </el-form-item>
    
      </el-form>

    <!--底部按钮块, 默认只有"取消"按钮-->
    <template #footerButton>
      <!--<el-button-->
              <!--type="primary"-->
          <!---->
              <!--:loading="btnLoading"-->
              <!--@click="this.$refs.form.submit()"-->
      <!--&gt;保 存-->
      <!--</el-button>-->
      <el-button @click="$refs.modal_info.handleClose()">关闭</el-button>
    </template>
  </modal>
</template>

<script>
  import { getDetail} from "@/api/anwise/im/im_message";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        emits: ["success"],
        editable: false,
        title: "详情",
        isCloseConfirm: false,
        fullscreen: false,
        form: {},
        query: {},
        loading: true,
        btnLoading: false,
        data: []
        };
    },
    computed: {
    },
    methods: { 
      show(option) {
          if (option.id) {
              setTimeout(() => {
                  getDetail(option.id).then(res =>{
                      console.log(res);
                      if (res.data.success) {
                          this.form = res.data.data;
                      }
                  })
              }, 500);
          } else {
              this.$message({
                  type: "error",
                  message: "找不到对应站内信!"
              });
          }
          this.title = option.title;
          this.type = option.type;
         // this.option.detail = this.type === "view";
          this.editable = this.type !== "view";
          this.$refs.modal_info.show();
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      opened() {
          console.log("opened")
      },
      closed() {
          this.$emit("success");
      }
    }
  };
</script>

<style scoped lang="scss">
  .article {
    flex: 1;
    margin-bottom: 10px;
    &-text {
      background-color: #fafafa;
      overflow-y: auto;
      padding: 0px 15px;
    }
  }
</style>

